/**
 * 排班表示例应用 - 使用 Mock API
 */

import { useState, useEffect } from 'react'
import {
  Schedule,
  CanvasRendererPlugin,
  DragDropPlugin,
  ModalPlugin,
  ContextMenuPlugin,
  HoverHighlightPlugin,
} from './components/Schedule'
import type { Employee, Shift, Plugin } from './components/Schedule'
import { getEmployees, getShifts } from './components/Schedule/api'
import './App.css'

// 配置插件 - 使用 Canvas 渲染器
const plugins: Plugin[] = [
  CanvasRendererPlugin, // Canvas 渲染器（替代 LayoutPlugin）
  HoverHighlightPlugin, // 鼠标悬浮高亮
  DragDropPlugin, // 拖拽功能
  ModalPlugin, // 模态框
  ContextMenuPlugin, // 右键菜单
]

function App() {
  const [employees, setEmployees] = useState<Employee[]>([])
  const [shifts, setShifts] = useState<Shift[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    loadData()
  }, [])

  // 提供刷新数据的方法
  const refreshData = () => {
    console.log('🔄 手动刷新数据...')
    loadData()
  }

  // 暴露给全局，方便调试
  useEffect(() => {
    ;(window as any).refreshScheduleData = refreshData
    return () => {
      delete (window as any).refreshScheduleData
    }
  }, [])

  async function loadData() {
    try {
      setLoading(true)
      setError(null)

      const [employeesData, shiftsData] = await Promise.all([getEmployees(), getShifts()])

      setEmployees(employeesData)
      setShifts(shiftsData)
    } catch (err) {
      console.error('Failed to load data:', err)
      setError('数据加载失败，请确保 Mock 服务器正在运行 (npm run dev:mock)')
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div className="app">
        <div className="app-header">
          <h1>排班管理系统</h1>
          <p>加载中...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="app">
        <div className="app-header">
          <h1>排班管理系统</h1>
          <p style={{ color: '#e74c3c' }}>{error}</p>
          <button onClick={loadData} style={{ marginTop: '1rem' }}>
            重新加载
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="app">
      <div className="app-header">
        <h1>排班管理系统</h1>
        <p>
          基于插件化架构的可扩展排班表组件 · 员工数: {employees.length} · 班次数: {shifts.length}
        </p>
      </div>

      <div className="app-content">
        <Schedule
          employees={employees}
          shifts={shifts}
          plugins={plugins}
          config={{
            defaultView: 'week',
            weekStartsOn: 1,
            draggable: true,
            contextMenu: true,
          }}
        />
      </div>

      <div className="app-footer">
        <div className="plugin-info">
          <h3>已启用的插件：</h3>
          <ul>
            <li>✅ Canvas渲染器 - 高性能Canvas绘制</li>
            <li>✅ 虚拟滚动 - 只渲染可见区域</li>
            <li>✅ 模态框插件 - 添加/编辑班次</li>
            <li>✅ 右键菜单插件 - 快捷操作</li>
          </ul>
        </div>
        <div className="features-info">
          <h3>Canvas特性：</h3>
          <ul>
            <li>🎨 Canvas绘制 - 高性能渲染</li>
            <li>📊 固定表头 - 日期始终可见</li>
            <li>👥 固定左列 - 员工名称固定</li>
            <li>📱 虚拟滚动 - 支持大数据量</li>
            <li>🖱️ 滚动条 - 横向和纵向滚动</li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default App
